/* 大版面 */
.user-message-page {
    display: none;
    position: absolute;
    z-index: 10;
    top: 90px;
    width: 100%;
    height: 715px;
    background-image: url(../images/myMusic-bgi.webp);
    background-size: cover;
}

/* 标题1 */
.private-space {
    margin-top: 340px;
    text-align: center;
    font-size: 60px;
    font-weight: 300;
    color: #fff;
    cursor: default;
}

/* 标题2 */
.login-to-manage {
    margin-top: 20px;
    text-align: center;
    font-size: 26px;
    font-weight: 300;
    color: #fff;
    cursor: default;
}

/* 登录按钮 */
.no-login-button {
    margin-left: 680px;
    margin-top: 30px;
    width: 130px;
    height: 50px;
    border-radius: 3px;
    background-color: #31C27C;
    color: #fff;
    border: 0;
    font-size: 20px;
    cursor: pointer;
}





/* 用户信息页 */
.user-inf-page {
    display: none;
    position: absolute;
    top: 90px;
    z-index: 15;
    width: 100%;
}

/* 信息页头部 */
.user-basic-inf {
    position: relative;
    width: 100%;
    height: 380px;
    background-image: url(../images/myMusic-bgi-2.webp);
    background-size: cover;
}

/* 头部头像 */
.user-inf-head {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -60px;
    width: 120px;
    height: 120px;
    border: 3px solid #fff;
    border-radius: 50%;
    background-size: cover;
}

/* 头部昵称 */
.user-inf-name {
    position: absolute;
    top: 220px;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 40px;
    font-size: 25px;
    color: #fff;
    text-align: center;
}

/* 头部签名 */
.user-inf-signature {
    position: absolute;
    top: 280px;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    height: 50px;
    font-size: 18px;
    color: #fff;
    text-align: center;
}

/* 头部导航 */
.user-inf-nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -600px;
    width: 1200px;
    height: 60px;
}

/* “我的喜欢” */
.user-likes-nav {
    float: left;
    width: 100px;
    height: 100%;
    line-height: 60px;
    color: #fff;
    cursor: pointer;
}

/* “我的歌单” */
.user-playlists-nav {
    float: left;
    margin-left: 20px;
    width: 100px;
    height: 100%;
    line-height: 60px;
    color: #fff;
    cursor: pointer;
}

.default-select {
    color: #31C27C;
}

.user-likes-nav:hover,
.user-playlists-nav:hover {
    color: #31C27C;
}





/* 喜欢、歌单区域 */
.user-likes-playlists-area {
    width: 100%;
    background-color: #fff;
}

/* 喜欢、歌单居中区域 */
.likes-playlists-middle-area {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

/* 喜欢的单曲列表 */
.like-box {
    width: 100%;
    height: 550px;
}

/* 喜欢的item */
.like-box li:nth-of-type(odd) {
    background-color: #f7f7f7;
}

.like-title,
.like-item {
    height: 50px;
}

/* 字样 */
.like-title {
    background-color: #f7f7f7;
}

/* 标题 */
.blank,
.song-text,
.player-text,
.album-text {
    float: left;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999;
}

.blank {
    width: 60px;
}

.song-text {
    width: 460px;
}

.player-text {
    width: 300px;
}

.album-text {
    width: 380px;
}

/* 序号 */
.item-count {
    float: left;
    width: 60px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    color: #999;
}

/* 歌名 */
.item-name {
    float: left;
    width: 460px;
    line-height: 50px;
    font-size: 14px;
    cursor: pointer;
}

/* 歌手 */
.item-player {
    float: left;
    width: 300px;
    line-height: 50px;
    font-size: 14px;
}

/* 专辑 */
.item-album {
    float: left;
    width: 380px;
    line-height: 50px;
    font-size: 14px;
}

.item-name:hover {
    color: #31C27C;
}





/* "我的歌单"中心区域 */
.user-playlists-middle-area {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

/* 新建歌单按钮 */
.create-new-playlist-btn {
    position: relative;
    width: 140px;
    height: 40px;
    cursor: pointer;
    font-size: 15px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 3px;
}

.create-new-playlist-btn:hover {
    background-color: #f7f7f7;
}

/* 导航字样 */
.my-playlists-state {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #f7f7f7;
}

/* "歌单" */
.my-playlists-name {
    position: absolute;
    left: 40px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999;
}

/* "曲目数" */
.my-playlists-num {
    position: absolute;
    left: 600px;
    width: 60px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999;
}

/* "播放量" */
.my-playlists-count {
    position: absolute;
    left: 1000px;
    width: 60px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #999;
}

/* 每行item */
.my-playlists-line-item {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.my-playlists-line-item:nth-of-type(odd) {
    background-color: #f7f7f7;
}

/* 歌单图片 */
.each-playlist-pic {
    position: absolute;
    top: 5px;
    left: 40px;
    width: 50px;
    height: 50px;
    background-size: cover;
}

/* 歌单名 */
/* 曲目数 */
/* 播放量 */
.each-playlist-name,
.each-playlist-num,
.each-playlist-count {
    position: absolute;
    height: 60px;
    font-size: 14px;
    color: #000;
}

.each-playlist-name {
    left: 110px;
    cursor: pointer;
}

.each-playlist-name:hover {
    color: #31C27C;
}

.each-playlist-num {
    left: 600px;

}

.each-playlist-count {
    left: 1000px;
}

/* 新建歌单盒子 */
.create-box {
    display: none;
    position: absolute;
    z-index: 4;
    top: 40px;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    height: 250px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3);
}

/* "新建歌单" */
.create-box-title {
    position: relative;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
}

/* 关闭按钮 */
.create-box-close {
    position: absolute;
    top: 0;
    right: 20px;
    cursor: pointer;
}

/* 歌单名 */
.create-box-name {
    position: absolute;
    top: 110px;
    left: 50px;
    font-size: 14px;
}

/* 歌单名输入框 */
.create-playlist-name {
    position: absolute;
    top: 100px;
    left: 120px;
    width: 340px;
    height: 40px;
    font-size: 14px;
    border: 1px solid #e8e8e8;
}

/* 剩余字数 */
.rest-count {
    position: absolute;
    top: 112px;
    right: 50px;
    color: #999;
    font-size: 14px;
}

/* 超字数提示 */
.above-warning {
    display: none;
    position: absolute;
    top: 150px;
    right: 40px;
    color: red;
}

/* 取消按钮 */
.cancel-create-btn {
    position: absolute;
    left: 220px;
    bottom: 30px;
    width: 120px;
    height: 40px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    cursor: pointer;
}

.cancel-create-btn:hover {
    background-color: #ededed;
}

/* 确定按钮 */
.certain-create-btn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 120px;
    height: 40px;
    border: 1px solid #e8e8e8;
    background-color: #31C27C;
    color: #fff;
    cursor: pointer;
}

.certain-create-btn:hover {
    background-color: #2caf6f;
}